<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
	<script type="text/javascript" src="Scripts/CanvasLib/dom-utils.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/canvas-extentions.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/shape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/line.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-line.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/rect.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-rect.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/image.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/circle.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/arrow.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/text.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/irregular-shape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-irregular-shape.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/scene.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/animation.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/draggable.js"></script>
	<!-- END MOSHU'S -->
	
	<!-- INCLUDE SNAKE'S LIBRARY-->
	<script type="text/javascript" src="Scripts/SceneEditor/Painters/painter.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/Painters/irregular-shape-painter.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/json3.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/sceneEditor.js"></script>
	<script type="text/javascript" src="Scripts/Demos/snake.js"></script>
	<!-- END SNAKE'S -->
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Scene Editor</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
				<div class="property category">
					Grid Properties
				</div>
				<div class="property">
					<div class="label">Grid width(px)</div>
					<div class="value"><input type="text" id="gridWidth" value="500"/></div>						
				</div>
				<div class="property">
					<div class="label">Grid height(px)</div>
					<div class="value"><input type="text" id="gridHeight" value="500"/></div>						
				</div>
				<div class="property">
					<div class="label">Offset left (%)</div>
					<div class="value"><input type="text" id="offsetLeft" value="5"/></div>						
				</div>
				<div class="property">
					<div class="label">Offset right (%)</div>
					<div class="value"><input type="text" id="offsetRight" value="5"/></div>						
				</div>
				<div class="property">
					<div class="label">Offset top (%)</div>
					<div class="value"><input type="text" id="offsetTop" value="5"/></div>						
				</div>
				<div class="property">
					<div class="label">Offset bottom (%)</div>
					<div class="value"><input type="text" id="offsetBottom" value="5"/></div>						
				</div>
				<div class="property">
					<div class="label">Cell size (% width)</div>
					<div class="value"><input type="text" id="cellSize" value="10"/></div>						
				</div>
				<div class="property category">
					Shape Actions
				</div>
				<div class="property">
					<div class="label">
						Irregular
					</div>
					<div class="value">
						<input type="button" value="Create" onclick="startIrregularShape()"/>							
					</div>						
				</div>
				<div class="property">
					<div class="label">
						Finalize
					</div>
					<div class="value">
						<input type="button" value="Finalize" onclick="finalizeShape()"/>						
					</div>						
				</div>
				<div class="property category">
					Global Actions
				</div>
				<div class="property">
					<div class="label">
						Reset Grid
					</div>
					<div class="value">
						<input type="button" value="Refresh" onclick="if(confirm('Are you sure you want to refresh?')){refreshGame();}"/>
					</div>						
				</div>
				<div class="property">
					<div class="label">
						Serialize
					</div>
					<div class="value">
						<input type="button" value="Serialize" onclick="serializeScene()"/>
					</div>						
				</div>
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="scene" style="border:2px solid black;"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Input / Output</div>
			<textarea id="output" style="width:100%; height:90%"></textarea>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
		var scene = new Scene("scene");
		scene.setBackgroundColor("beige");
		var editor = new SceneEditor(scene);		
		function getValue(id){
			return document.getElementById(id).value;
		}
		function getInt(id){
			return parseFloat(document.getElementById(id).value);
		}		
		function refreshGame(){				
			scene.canvas.width = getInt("gridWidth");
			scene.canvas.height = getInt("gridHeight");
			editor.offsetLeft = getInt("offsetLeft");
			editor.offsetRight = getInt("offsetRight");
			editor.offsetTop = getInt("offsetTop");
			editor.offsetBottom = getInt("offsetBottom");
			editor.cellSize = getInt("cellSize");				
			editor.draw();
						
			/* var shapes = [new ResponsiveIrregularShape([{"x":5,"y":25},{"x":5,"y":85},{"x":25,"y":85},{"x":15,"y":25}]),new ResponsiveIrregularShape([{"x":75,"y":35},{"x":65,"y":95},{"x":95,"y":85},{"x":75,"y":35}]),new ResponsiveIrregularShape([{"x":25,"y":5},{"x":35,"y":15},{"x":55,"y":15},{"x":55,"y":5}])];
			for(var i=0;i<shapes.length;i++){
				var shape = shapes[i];
				shape.strokeColor = "blue";
				shape.strokeWidth =5;
				scene.add(shape);
				scene.invalidate();
			} */
		}
		refreshGame();
		
		function startIrregularShape(){
			editor.startResponsiveIrregularShape();
		}
		function finalizeShape(){
			editor.finalizeShape();
		}
		function serializeScene(){
			var str = editor.serialize();
			document.getElementById("output").value = str;
		}
	</script>
</body>
</html>